<template>
  <div class="type">
    <el-col :span="10">
      <el-form-item label="按分类筛选：">
        <el-select v-model="form.gt_pno" placeholder="请选择大类分类" class="selectbtn" @change="getTypeS" clearable>
          <el-option v-for="item in typeListB" :key="item.gt_id" :label="item.gt_name" :value="item.gt_name">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="10" class="smalltype">
      <el-form-item label="">
        <el-select v-show="!typeListS.length" v-model="form.gt_name" placeholder="请选择小类分类" class="selectbtn" clearable
          disabled>
          <el-option label="" value="">
          </el-option>
        </el-select>
        <el-select v-show="typeListS.length" v-model="form.gt_name" placeholder="请选择小类分类" class="selectbtn"
          @change="sendType" clearable>
          <el-option v-for="item in typeListS" :key="item.gt_id" :label="item.gt_name" :value="item.gt_name">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </div>

</template>

<script>
  import { commodityType, commoditySearch } from '../../http/apis/goodsApi/commodity.js'
  export default {
    components: {},
    props: {
      pno: {
        type: String,
        default: ''
      },
      name: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        form: {
          goods_name: '',//商品名称
          goods_descript: '',//商品规格
          goods_barcode: '',//商品型号
          gt_pno: this.pno,//商品大类
          gt_name: this.name//商品小类
        },
        gt_id: '',
        typeListB: [],//商品大类列表
        typeListS: [],//商品小类列表
      };
    },
    methods: {
      // 请求种类
      getType(num) {
        commodityType(num).then((res) => {
          console.log('种类成功请求:', res.data.data);
          if (res.data.code == '200') {
            if (!num) {
              this.typeListB = res.data.data
            } else {
              this.typeListS = res.data.data
            }
          }
        })
          .catch((err) => {
            console.log('请求失败', err)
          });
      },
      // 小类列表渲染
      getTypeS() {
        this.form.gt_name = ''//同步清除小类
        this.typeListS = ''//清除小类列表
        // 查找小类
        if (this.form.gt_pno) {
          let id = 0;
          this.typeListB.forEach((item) => {
            if (item.gt_name == this.form.gt_pno) {
              id = item.gt_id
            }
          });
          this.$emit("sendType", id, '', this.form.gt_pno);
          this.getType({ gt_id: id })
        }
      },
      // 指定查询
      submitForm() {
        // this.$emit('highSearch', this.form);
        commoditySearch({
          currentPage: 1,//当前页码数
          pageSize: 3,//每页显示条数
          goods_name: this.form.goods_name,//商品名称
          goods_descript: this.form.goods_descript,//商品规格
          goods_barcode: this.form.goods_barcode,//商品型号
          gt_pno: this.form.gt_pno,//商品大类
          gt_name: this.form.gt_name//商品小类

        }).then((res) => {
          console.log('条件查询成功请求:', res.data.data);
          if (res.data.code == '200') {
            console.log(2)
          }
        })
          .catch((err) => {
            console.log('请求失败', err)
          });
      },
      // 清空条件
      resetForm() {
        for (let key in this.form) {
          this.form[key] = ''
        }
      },
      // 传值给父组件
      sendType() {
        let id = 0;
        this.typeListS.forEach((item) => {
          if (item.gt_name == this.form.gt_name) {
            id = item.gt_id
          }
        });
        this.$emit("sendType", id, this.form.gt_pno, this.form.gt_name);
      }
    },
    created() {
      this.getType()
    },
  };
</script>
<style lang="scss" scoped>
  .selectbtn {
    margin-left: 0px;
  }
</style>